<template>
  <div style="background-color: #f5f6fa; width: 1920px; height: 1080px">
    <BDhear :num="5"></BDhear>
    <div class="main">
      <div class="yes">
        <h3>· 担保人信息</h3>
        <div class="yesform">
          <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
            <el-col :span="20">
              <el-form-item label="抵押人：" prop="field126">
                <el-input
                  v-model="formData.diya"
                  placeholder="请输入抵押人："
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label="出质人：" prop="field127">
                <el-input
                  v-model="formData.chuzhi"
                  placeholder="请输入出质人："
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item label="反担保人：" prop="field128">
                <el-input
                  v-model="formData.fandanbao"
                  placeholder="请输入反担保人："
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </div>
      </div>
      <div class="no">
        <h3>· 反担保人信息</h3>
        <div class="noform">
          <el-row :gutter="15">
            <el-form
              ref="elForm"
              :model="formData"
              :rules="rules"
              size="medium"
              label-width="100px"
            >
              <el-col :span="20">
                <el-form-item label-width="130px" label="反担保人姓名：" prop="field136">
                  <el-input
                    v-model="formData.handler_name_one"
                    placeholder="请输入反担保人姓名："
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label-width="130px" label="联系电话：" prop="field137">
                  <el-input
                    v-model="formData.handler_mobile_one"
                    placeholder="请输入联系电话："
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label-width="130px" label="身份证号码：" prop="field138">
                  <el-input
                    v-model="formData.cardno_one"
                    placeholder="请输入身份证号码："
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="15">
                <el-form-item label-width="130px" label="验证码：" prop="field139">
                  <el-input
                    v-model="formData.captcha_one"
                    placeholder="请输入验证码："
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                  <button @click="send">获取验证码</button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </div>
      </div>
    </div>
    <div class="agreement">
      <div class="EP_pdf_box">
        <div class="EP_PDF_IMG_LEFT">
          <div class="EP_img">
            <img src="../../assets/BidSecurity/EP_PDF.png" />
          </div>
          <div style="font-size: 16px; color: #333">
            <div>法人证明书</div>
            <div>2022-08-18 17:51:43</div>
          </div>
        </div>
        <div class="EP_PDF_RIGHT">
          <el-button @click="farenqianzhang" style="width: 82px; height: 34px">签订</el-button>
        </div>
      </div>
      <div class="EP_pdf_box">
        <div class="EP_PDF_IMG_LEFT">
          <div class="EP_img">
            <img src="../../assets/BidSecurity/EP_PDF.png" />
          </div>
          <div style="font-size: 16px; color: #333">
            <div>担保协议书</div>
            <div>2022-08-18 17:51:43</div>
          </div>
        </div>
        <div class="EP_PDF_RIGHT">
          <el-button @click="danbaoqianzhang" style="width: 82px; height: 34px">签订</el-button>
        </div>
      </div>
      <div class="EP_pdf_box">
        <div class="EP_PDF_IMG_LEFT">
          <div class="EP_img">
            <img src="../../assets/BidSecurity/EP_PDF.png" />
          </div>
          <div style="font-size: 16px; color: #333">
            <div>真实性承诺书</div>
            <div>2022-08-18 17:51:43</div>
          </div>
        </div>
        <div class="EP_PDF_RIGHT">
          <el-button @click="zhenshiqianzhang" style="width: 82px; height: 34px">签订</el-button>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-button @click="shang()"  v-if="isShow" style="width: 175px; height: 60px">上一步</el-button>
      <el-button
        v-if="isShow"
        @click="tiao()"
        style="width: 175px; height: 60px"
        type="primary"
      >提交审核</el-button>
     <el-button v-if="!isShow" @click="$router.push('/')" style="width: 175px; height: 60px" type="primary">回到首页</el-button>
       <el-button   v-if="isShow1" style="width: 175px; height: 60px" type="info" disabled>审核中</el-button>
         <el-button v-if="isShow2" @click="$router.push('/BidSecurity/BidPayment')" style="width: 175px; height: 60px"  type="primary" disabled="">审核已完成，下一步</el-button>
    </div>
  </div>
</template>

<script>
import {
  zhenshiqianzhang,
  danbaoqianzhang,
  farenqianzhang,
  bhdetail
} from "@/api/ElectronicProtocol";
import BDhear from "./BDhear.vue";
import axios from "axios";

export default {
  components: {
    BDhear
  },
  name: "ElectronicProtocol",
  data() {
    return {
      isShow: true,
      isShow1: false,
      isShow2: false,
      isShow3:false,
      ElectronicProtocollist: { guarantee_apply_id: "549" },
      formData: {
        apply_number: sessionStorage.getItem("apply_number"),
        guarantee_apply_id: sessionStorage.getItem("guarantee_apply_id"),
        diya: undefined,
        chuzhi: undefined,
        fandanbao: undefined,
        // handler_name_one: undefined,
        // cardno_one: undefined,
        // captcha_one:"",
        // proid: undefined,
        // handler_mobile_one: undefined,
        handler_name_one: "王治家",
        cardno_one: "410381198711235517",
        captcha_one: "123456",
        proid: undefined,
        handler_mobile_one: "13681030210"
      },
      rules: {
        diya: [
          {
            required: true,
            message: "请输入抵押人：",
            trigger: "blur"
          }
        ],
        chuzhi: [
          {
            required: true,
            message: "请输入出质人：",
            trigger: "blur"
          }
        ],
        fandanbao: [
          {
            required: true,
            message: "请输入反担保人：",
            trigger: "blur"
          }
        ],
        handler_name_one: [
          {
            required: true,
            message: "请输入反担保人姓名：",
            trigger: "blur"
          }
        ],
        handler_mobile_one: [
          {
            required: true,
            message: "请输入联系电话：",
            trigger: "blur"
          }
        ],
        cardno_one: [
          {
            required: true,
            message: "请输入身份证号码：",
            trigger: "blur"
          }
        ],
        field139: [
          {
            required: true,
            message: "请输入验证码：",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
      this.xinagqing()
    // this.ElectronicProtocols();
  },
  methods: {
    //页面
        xinagqing(){
 var bbc={
  company_id:sessionStorage.getItem("guarantee_apply_id")
 }
  bhdetail(bbc).then(res => {
    console.log("保函详情",res.data.data.jiben)
        console.log("审核状态",res.data.data.jiben.state)
          console.log("进度",res.data.data.jiben.step)
            console.log("审核人员",res.data.data.jiben.check_id)
            var shenhe=res.data.data.jiben.state
            var jindu=res.data.data.jiben.step
            var renyaun=res.data.data.jiben.check_id
             if(shenhe==0&&jindu==1&&renyaun==null){
              console.log("未提交")
            }else{
              this.isShow=false
            }
            if(shenhe==1&&jindu==2&&renyaun==null){
              console.log("第一次提交审核")
this.isShow1=true
            }
              if(shenhe==1&&jindu==2&&renyaun!==null){
              console.log("第一次已分配")
              this.isShow1=true
            }
              if(shenhe==2&&jindu==3&renyaun!==null){
              console.log("第一次审核完成")
              this.isShow2=true
            }
                if(shenhe==1&&jindu==4&renyaun!==null){
              console.log("第二次提交审核")
            }
               if(shenhe==2&&jindu==3&renyaun!==null){
              console.log("第二次审核完成")
            }
  // 审核状态 state
  // 进度  step
  // 审核人员  check_id

          if (res.data.code == 1) {
            // this.$message.success("签订成功");
          }
        });
    },
    danbaoqianzhang() {
      if (this.formData) {
        danbaoqianzhang(this.formData).then(res => {
          if (res.data.code == 1) {
            this.$message.success("签订成功");
          }
        });
      }
    },
    farenqianzhang() {
      farenqianzhang(this.formData).then(res => {
        if (res.data.code == 1) {
          this.$message.success("签订成功");
        }
      });
    },
    zhenshiqianzhang() {
      zhenshiqianzhang(this.formData).then(res => {
        if (res.data.code == 1) {
          this.$message.success("签订成功");
        }
      });
    },
    send() {
      axios({
        url: "http://192.168.0.28:8082/mobile/sms/send",
        method: "post", // params: '必须是一个无格式对象 query参数',
        data: {
          mobile: this.formData.handler_mobile_one,
          event: "check"
        },
        timeout: 1000,
        headers: {
          token: sessionStorage.getItem("token")
        }
      });
    },
    wancheng() {
      this.$message.error('请勿重复提交')
    },
    guarantee() {
      guarantee(this.formData).then(() => {});
    },
    shang() {
      this.$router.push("/BidSecurity/bidFrom");
    },
    tiao() {
   
        axios({
        url: "http://192.168.0.28:8082/mobile/agent/baohan/guarantee_add",
        method: "post", // params: '必须是一个无格式对象 query参数',
        data: {
          handler_name_one: this.formData.handler_name_one,
          handler_mobile_one: this.formData.handler_mobile_one,
          cardno_one: this.formData.cardno_one,
          captcha_one: this.formData.captcha_one,
          proid: sessionStorage.getItem("proid"),
          apply_number: sessionStorage.getItem("apply_number")
        },
        timeout: 1000,
        headers: {
          token: sessionStorage.getItem("token")
        }
      }).then(res => {
           this.$notify.error({
          message: res.data.msg
        });
        console.log("tijiao",res)
        if (res.data.code == 1) {
          this.$message.success("提交成功等待审核");
          // this.isShow = false;
        }
        // this.$router.push("/BidSecurity/Bidpayment");
      })
      .catch((err) => {
        
        console.log("失败",err.response.data);
               if(err.response.data.code==401){
 this.$notify.error({
          message: "请重新登录"
        });
        return
        }
          this.$notify.error({
          message: err.response.data.msg
        });
      });
        axios({
        url: "http://192.168.0.28:8082/mobile/agent/baohan/subdata",
        method: "post", // params: '必须是一个无格式对象 query参数',
        data: {
          apply_number: sessionStorage.getItem("apply_number")
        },
        timeout: 1000,
        headers: {
          token: sessionStorage.getItem("token")
        }
      }).then(res => {
           this.$notify.error({
          message: res.data.msg
        });
        console.log("tijiao",res)
        if (res.data.code == 1) {
          this.$message.success("提交成功等待审核");
          this.isShow = false;
        }
        // this.$router.push("/BidSecurity/Bidpayment");
      })
      .catch((err) => {
        
        console.log("失败",err.response.data);
               if(err.response.data.code==401){
 this.$notify.error({
          message: "请重新登录"
        });
        return
        }
          this.$notify.error({
          message: err.response.data.msg
        });
      });
    }
  }
};
</script>

<style scoped>
.el-upload__tip {
  line-height: 1.2;
}
.main {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 160px;
  right: 0;
  margin: auto;
  width: 1500px;
  height: 360px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.main .yes {
  width: 740px;
  height: 360px;
  border: #cecece 1px solid;
}
.main h3 {
  margin: 20px;
}
.main .yesform {
  width: 640px;
  height: 260px;
  margin: 50px;
}
.main .no {
  width: 740px;
  height: 360px;
  border: #cecece 1px solid;
}
.main .noform {
  width: 640px;
  height: 260px;
  margin: 50px;
}
.main .noform button {
  width: 140px;
  height: 38px;
  background-color: #1795ff;
  color: #fff;
  border: none;
  position: absolute;
  border-radius: 5px;
  margin-left: 5px;
  margin-bottom: 1px;
}
.agreement {
  position: absolute;
  top: 63%;
  left: 10.7%;
  width: 1500px;
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.footer {
  position: absolute;
  bottom: 30px;
  left: 39%;
  width: 380px;
  height: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.EP_PDF_RIGHT {
  width: 140px;
  display: flex;
  justify-content: space-around;
}

.EP_PDF_IMG_LEFT {
  display: flex;
  align-items: center;
  width: 300px;
  justify-content: space-around;
}

.EP_img {
  width: 59.4px;
  height: 61.97px;
  margin: 0 10px;
}

.EP_pdf_box {
  width: 730px;
  height: 80px;
  border: 1px solid #cecece;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
